import React, { useEffect, useState } from "react";
import { UploadOutlined } from "@ant-design/icons";
import { Button, message, Upload, Input } from "antd";
import type { GetProp, UploadFile, UploadProps } from "antd";
import { changeDrawerState } from "@/store/modules/themeStore";
import { uploadVideo } from "@/api/api_upload";
import { changeupdateState } from "@/store/modules/assStore";
import { useAppDispatch } from "@/store/hook.ts";
type FileType = Parameters<GetProp<UploadProps, "beforeUpload">>[0];
const { TextArea } = Input;
const VideoItem: React.FC = () => {
  const [fileList, setFileList] = useState<UploadFile[]>([]);
  const [uploading, setUploading] = useState(false);

  const [description, setDescription] = useState("");

  const [url, setUrl] = useState("");

  const getDescription = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setDescription(e.target.value);
  };

  const getUrl = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setUrl(e.target.value);
  };

  const dispatch = useAppDispatch();

  const handleUpload = () => {
    const formData = new FormData();
    //上传单个文件
    formData.append("file", fileList[0] as FileType);
    //添加描述
    formData.append("description", description);
    //添加url
    formData.append("url", url);

    // fileList.forEach((file) => {
    //   formData.append("files[]", file as FileType);
    // });
    setUploading(true);

    // 上传视频
    uploadVideo(formData)
      .then(() => {
        setFileList([]);
        setDescription("");
        setUrl("");
        dispatch(changeupdateState(true));
        dispatch(changeDrawerState(false));
        message.success("upload successfully.");
      })
      .catch(() => {
        message.error("upload failed.");
      })
      .finally(() => {
        setUploading(false);
      });
  };

  const props: UploadProps = {
    onRemove: (file) => {
      const index = fileList.indexOf(file);
      const newFileList = fileList.slice();
      newFileList.splice(index, 1);
      setFileList(newFileList);
    },
    beforeUpload: (file) => {
      setFileList([...fileList, file]);

      return false;
    },
    maxCount: 1,
    fileList,
  };

  return (
    <>
      <Upload {...props}>
        <Button disabled={url !== ""} icon={<UploadOutlined />}>
          选择视频
        </Button>
      </Upload>

      <div
        style={{
          marginTop: 16,
        }}
      >
        <span style={{ width: 30 }}>其他网站视频链接</span>
        <Input
          value={url}
          style={{ resize: "none", marginTop: 10 }}
          onChange={getUrl}
          disabled={fileList.length !== 0}
        />
      </div>

      <div
        style={{
          marginTop: 16,
        }}
      >
        <span style={{ width: 30 }}>描述</span>
        <TextArea
          value={description}
          showCount
          maxLength={100}
          style={{ height: 120, resize: "none", marginTop: 10 }}
          onChange={getDescription}
        />
      </div>

      <Button
        type="primary"
        onClick={handleUpload}
        disabled={(fileList.length === 0 && url === "") || description === ""}
        loading={uploading}
        style={{ marginTop: 16 }}
      >
        {uploading ? "上传中" : "开始上传"}
      </Button>
    </>
  );
};

export default VideoItem;
